<template>
  <div
    v-show="enable"
    class="drag-width-line"
    @mousedown="handleMouseDown"
    @mousemove="handleMouseMove"
    @mouseup="handleMouseUp"
    @mouseleave="handleMouseLeave"
    :data-name="name"
    :style="{[placement]: 0}"
    :class="isSelected ? 'active' : ''">
    <div class="content" :data-name="name"></div>
  </div>
</template>

<script >
import EventBus from '../../../LowCode/EventBus'
import { mouseStatus } from '../../../LowCode/lib/const'


const mousePosition = {
  start: 0
}
let isDrag = false

export default {
  props: {
    placement: {
      type: String,
      default: "right"
    },
    enable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isSelected: false,
      name: 'drag-width-line'
    }
  },
  methods: {
    handleMouseDown(event) {
      this.isSelected = true
      isDrag = true
      mousePosition.start = event.clientX
      EventBus.$emit("mouseStatusChange", mouseStatus.ADD_DRAG)
      console.log(this.placement)
    },
    handleMouseMove(event) {
      if (!isDrag){
        return false
      }
      const {
        name
      } = event.target.dataset
      if (name === this.name){
        let k = 1
        if (this.placement === 'left'){
          k = -1
        }
        const offsetX = event.clientX - mousePosition.start
        this.$emit('offsetXChange', offsetX * k)
        mousePosition.start = event.clientX
      }
      else {
        this.handleMouseUp()
      }
    },
    handleMouseUp(event) {
      this.isSelected = false
      isDrag = false
      EventBus.$emit("mouseStatusChange", mouseStatus.DEFAULT)
    },
    handleMouseLeave(event) {
      this.handleMouseUp()
    }
  },
  computed: {
    activeName() {
      const page = this.list.find(item => item.id === this.activePage)
      return page?.isShow ? this.activePage : undefined
    }
  }

}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
